<template>
	<view class="newsDetail">
		<view class="title">
			<view class="title-top">
				{{ detailData.title }}
			</view>
			<view class="title-bottom">
				<view class="text">
					<span class="time">{{ detailData.create_time }}</span>
<!-- 					<i class="Ticonfont Ticon-ai-eye"></i>
					<span class="observer">{{ detailData.views }}</span> -->
				</view>
			</view>
		</view>
		<!-- 内容 -->
		<view class='content'>
			<view class='contenttext first' v-html="content">
			</view>
		</view>
		
		<button class="naviconentent" open-type="share">
			<i class="Ticonfont Ticon-fenxiang iconImg" style="color: #fff;"></i>
			<text class="problem">分享</text>
		</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				detailData: null,
				id: null,
				content: null
			}
		},
		onLoad(option) {
			this.id = option.id
			this.getdata()
			// this.detailData = JSON.parse(decodeURIComponent(option.detailData))
		},
		mounted() {

		},
		methods: {
			// 获取新闻详情
			getDetail() {
				this.detailData = {
					id: 40,
					title: "广东:古树有8万多棵,数量上惠州第一",
					views: 2,
					originalName: "原创",
					content: "<div><p>广东，一个位于南方的美丽省份，这里不仅有繁忙的城市和难忘的美食，还有着许多令人惊叹的古老树木。</p></div><div><p>据林业部门统计，广东境内有8万多棵名副其实的“古树”，其中树龄500岁以上的，有760棵。</p></div><div><p>广东的古树数量，全国能排第几呢？</p><div><p>广东，一个位于南方的美丽省份，这里不仅有繁忙的城市和难忘的美食，还有着许多令人惊叹的古老树木。</p></div><div><p>据林业部门统计，广东境内有8万多棵名副其实的“古树”，其中树龄500岁以上的，有760棵。</p></div><div><p>广东的古树数量，全国能排第几呢？</p><p><img src=\"http://113.96.110.60:9874/group1/M00/08/06/wKg8lmWCuoqAGHauABCmkTzBsOw789.png\" style=\"max-width:100%;\"><br></p><div><div><p>荔枝树不仅提供了丰富的果实，还具有观赏价值和生态功能。是一种具有很高经济价值的树种。</p></div><p><img src=\"http://113.96.110.60:9874/group1/M00/08/06/wKg8lmWCupSAF_MyAA_IWamXXUc936.png\" style=\"max-width:100%;\"><br></p><div><p>樟树以其高大挺拔的姿态和芳香的气味而闻名，樟树寿命很长，在我国百年的樟树不计其数，上千年的也有不少。</p><p><img src=\"http://113.96.110.60:9874/group1/M00/08/06/wKg8lmWCup2AWMOOABEjrbeIyoU881.png\" style=\"max-width:100%;\"><br></p><div><p>它不仅因为其甜美的果实而受到人们喜爱，还因其悠久的历史背景而备受推崇。龙眼树的寿命也是相对较长的，一般都能达到上百年。</p></div><div><p>在古代，龙眼果被视为珍贵的水果，常被皇室贵族所享用。</p></div><div><p>同时，龙眼树也经常被赋予象征吉祥和幸福的意义，在一些传统节日和婚庆仪式上常被用作装饰和象征。</p></div></div></div></div></div>",
					stateName: "已发布",
					createTime: "2023-10-07 14:31:53",
					createName: "超级管理员",
				}
				this.content = (this.detailData.content).replace(/\<img/gi, '<img style="max-width:100%;height:auto" ')
				uni.setNavigationBarTitle({
					title:this.detailData.title
				})

			},
			async getdata(){
				this.$H.get('/article/detail',{
					articleId : this.id
				}).then(res => {
					if (res.status == 200) {
						this.detailData = res.data.detail
						this.islogin = true;
						
						this.content = (this.detailData.content).replace(/\<img/gi, '<img style="max-width:100%;height:auto" ')
						uni.setNavigationBarTitle({
							title:this.detailData.title
						})
					}
				})
			},
			share(){
				uni.share({
					provider: "weixin",
					scene: "WXSceneTimeline",
					type: 0,
					href: "http://uniapp.dcloud.io/",
					title: this.detailData.title,
					summary: "我正在使用xxx小程序",
					imageUrl: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png",
					success: function (res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function (err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.newsDetail {
		height: 100%;
		overflow-y: scroll;

		.title {
			padding: 43rpx 33rpx 22rpx;
			border-bottom: 1rpx solid #E7E7E7;

			.title-top {
				width: 100%;
				font-size: 37.5rpx;
				color: #333;
				margin-bottom: 41rpx;
			}

			.title-bottom {
				width: 100%;
				overflow: hidden;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.text {
					flex: 1;
					display: flex;
					align-items: center;
					.Ticonfont {
						color: #666;
						margin: 0px 10rpx;
					}
				}

				.time,
				.observer {
					color: #999;
					font-size: 29.17rpx;
				}

				.moretext {
					overflow: hidden;

					.text {
						display: inline-block;
						padding: 0rpx 23rpx;
						height: 46rpx;
						line-height: 46rpx;
						background: #E3F6F8;
						border-radius: 23rpx;
						color: #2BACB8;
						font-size: 25rpx;
					}
				}
			}
		}

		.content {
			padding: 42rpx 36rpx 0;
			font-size: 29rpx;
			line-height: 59rpx;

			.imgcontent {
				background: #fff;
				height: 357rpx;
				margin: 32rpx 0;

				image {
					width: 100%;
				}
			}

			.contenttext {
				p {
					display: block;
					width: 100% !important;
				}

			}
		}
	}

	.naviconentent {
		position: fixed;
		right: 22rpx;
		bottom: 170rpx;
		width: 55rpx;
		line-height : 28rpx;
		height:140rpx;
		background: linear-gradient(0deg, #1BACBD 0%, #1BBDAC 100%);
		box-shadow: 0rpx 0rpx 21rpx 0rpx rgba(27, 173, 188, 0.5);
		border-radius: 43rpx;
		text-align: center;
		color: #FFF;
		padding: 0 15rpx;
		font-size: 25rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
</style>